<template>

  <div>
    <el-drawer
      :wrapperClosable="false"
      v-if="true"
      :title="title"
      :visible.sync="open"
      direction="rtl"
    >
      <el-container>
        <el-main>
          <!--        配置名称 -->
          <el-form ref="form" :model="form" :rules="rules" label-width="350px">
            <el-form-item label="配置名称" label-position="left" label-width="100px" prop="name">
              <el-input v-model="form.name" placeholder="请输入配置名称"/>
            </el-form-item>
            <!--          通知类型-->
            <el-form-item label="通知类型" label-position="left" label-width="100px" prop="type">
              <el-select
                v-model="form.type"
                placeholder="请选择通知类型"
                :disabled="this.typeVisible"
                @change="changeType"
                class="select-width">
                <el-option
                  v-for="dict in dict.type.notify_config_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>

            <!--          服务商-->
            <el-form-item label="服务商" label-position="left" label-width="100px" prop="provider">
              <el-select v-model="form.provider" class="select-width">
                <el-option
                  v-for="(item,i) in this.providerData"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <!--            regionId -->
            <el-form-item
              v-if="regionIdVisible"
              label="regionId"
              label-position="left"
              label-width="100px"
              prop="configuration.regionId">
              <el-input v-model="form.configuration.regionId"/>
            </el-form-item>

            <!--            accessKeyId -->
            <el-form-item
              v-if="accessKeyIdVisible"
              label="accessKeyId"
              label-position="left"
              label-width="100px"
              prop="configuration.accessKeyId">
              <el-input v-model="form.configuration.accessKeyId"/>
            </el-form-item>

            <!--            secret -->
            <el-form-item
              v-if="secretVisible"
              label="secret"
              label-position="left"
              label-width="100px"
              prop="configuration.secret">
              <el-input v-model="form.configuration.secret"/>
            </el-form-item>

            <!--            appKey -->
            <el-form-item
              v-if="appKeyVisible"
              label="appKey"
              label-position="left"
              label-width="100px"
              prop="configuration.appKey">
              <el-input v-model="form.configuration.appKey"/>
            </el-form-item>

            <!--            appSecret -->
            <el-form-item
              v-if="appSecretVisible"
              label="appSecret"
              label-position="left"
              label-width="100px"
              prop="configuration.appSecret">
              <el-input v-model="form.configuration.appSecret"/>
            </el-form-item>

            <!--            corpId -->
            <el-form-item
              v-if="corpIdVisible"
              label="corpId"
              label-position="left"
              label-width="100px"
              prop="configuration.corpId">
              <el-input v-model="form.configuration.corpId"/>
            </el-form-item>

            <!--            corpSecret -->
            <el-form-item
              v-if="corpSecretVisible"
              label="corpSecret"
              label-position="left"
              label-width="100px"
              prop="configuration.corpSecret">
              <el-input v-model="form.configuration.corpSecret"/>
            </el-form-item>

            <!--            host -->
            <el-form-item
              v-if="hostVisible"
              label="服务器地址"
              label-position="left"
              label-width="100px"
              prop="configuration.host">
              <el-input v-model="form.configuration.host"/>
            </el-form-item>

            <!--            port -->
            <el-form-item
              v-if="portVisible"
              label="端口"
              label-position="left"
              label-width="100px"
              prop="configuration.port">
              <el-input v-model="form.configuration.port"/>
            </el-form-item>

            <!--            sender -->
            <el-form-item
              v-if="senderVisible"
              label="发件人"
              label-position="left"
              label-width="100px"
              prop="configuration.sender">
              <el-input v-model="form.configuration.sender"/>
            </el-form-item>

            <!--            username -->
            <el-form-item
              v-if="usernameVisible"
              label="用户名"
              label-position="left"
              label-width="100px"
              prop="configuration.username">
              <el-input v-model="form.configuration.username"/>
            </el-form-item>

            <!--            password -->
            <el-form-item
              v-if="passwordVisible"
              label="密码"
              label-position="left"
              label-width="100px"
              prop="configuration.password">
              <el-input v-model="form.configuration.password"/>
            </el-form-item>

            <!--            properties -->
            <el-form-item
              v-if="propertiesVisible"
              label="其他配置"
              label-position="left"
              label-width="100px"
              prop="configuration.properties">

              <el-row v-for="(v,k,i) in form.configuration.properties" style="margin-bottom: 8px">
                <el-col :span="6">
                  <!-- 其他配置标识 -->
                  <el-form-item prop="configuration.properties.name">
                    <el-input v-model="v.name" @input="$forceUpdate()" placeholder="key"/>
                  </el-form-item>
                </el-col>
                <el-col :span="1" class="joint-mark-icon" style="margin-left: 5px"><i class="el-icon-right"/></el-col>
                <el-col :span="6">
                  <!-- 其他配置值 -->
                  <el-form-item prop="configuration.properties.value">
                    <el-input v-model="v.value" @input="$forceUpdate()" placeholder="value"/>
                  </el-form-item>
                </el-col>
                <el-col :span="1" class="joint-mark-icon" style="margin-left: 5px"><i class="el-icon-right"/></el-col>
                <el-col :span="6">
                  <!-- 其他配置描述 -->
                  <el-form-item prop="configuration.properties.description">
                    <el-input v-model="v.description" @input="$forceUpdate()" placeholder="说明"/>
                  </el-form-item>
                </el-col>
                <el-col :span="3" style="padding-left: 12px">
                  <!-- 新增其他配置 -->

                  <el-button v-show="buttonAddPropertiesVisible(k)" @click="addPropertiesDomain" type="text">
                    <i class="el-icon-circle-plus-outline"/>
                  </el-button>
                  <!-- 删除其他配置 -->
                  <el-button v-show="buttonRemovePropertiesVisible(k)" @click="removePropertiesDomain(i)" type="text">
                    <i class="el-icon-remove-outline"/>
                  </el-button>
                </el-col>
              </el-row>
            </el-form-item>


          </el-form>

        </el-main>

        <el-footer>
          <div class="bottom-bar" style="text-align: right">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
          </div>
        </el-footer>
      </el-container>
    </el-drawer>


  </div>

</template>


<script>
import {mapState} from 'vuex'
import {getConfig, addConfig, updateConfig, getProvider} from '@/api/notify/config';

export default {
  name: 'NotifyConfigAddEdit',
  dicts: ['notify_config_type'],
  components: {},
  data() {

    return {
      // 弹出层标题
      title: "",
      // 弹出层标题
      titleConfig: "",
      // 是否显示弹出层
      open: false,
      //判断操作是添加还是修改
      operationType: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dictLabel: null,
        dictType: null,
      },
      // 是否显示弹出层
      openConfig: false,
      num: 0,
      // 表单参数
      form: {
        configuration: {
          regionId: '',
          accessKeyId: '',
          secret: '',
          appKey: '',
          appSecret: '',
          corpId: '',
          corpSecret: '',
        },
      },
      serverIds: [],
      providerData: [],

      // 通知类型 是否禁用
      typeVisible: false,

      // regionId输入框默认隐藏
      regionIdVisible: false,
      // host输入框默认隐藏
      hostVisible: false,
      // port输入框默认隐藏
      portVisible: false,
      // sender默认隐藏
      senderVisible: false,
      // 用户名默认隐藏
      usernameVisible: false,
      // 密码默认隐藏
      passwordVisible: false,

      // accessKeyId输入框默认隐藏
      accessKeyIdVisible: false,
      // secret默认隐藏
      secretVisible: false,
      // appKey默认隐藏
      appKeyVisible: false,
      // appSecret默认隐藏
      appSecretVisible: false,
      // corpId默认隐藏
      corpIdVisible: false,
      // corpSecret 默认隐藏
      corpSecretVisible: false,
      //propertiesVisible 默认隐藏
      propertiesVisible: false,


      // 表单校验
      rules: {

        name: [
          {required: true, message: "通知配置名称不能为空", trigger: "blur"}
        ],
        type: [
          {required: true, message: "通知类型不能为空", trigger: "blur"}
        ],
        provider: [
          {required: true, message: "服务商不能为空", trigger: "blur"}
        ],


      },
      categoryMap: {},

    };
  },
  computed: {
    ...mapState({
      configData: state => state.config.configData,
    }),
  },

  watch: {
    'form.type'(type) {
      this.form.type = type;
    },
    'form.provider'(provider) {
      this.visibleByConfig(this.form.type, provider);
    },


  },

  methods: {
    // 表单重置
    reset() {
      this.form = {
        id: null,
        name: null,
        type: null,
        configuration: {},
        description: null,
        createTime: null,
        updateTime: null,
      };
      this.resetForm("form");
    },
    /** 取消按钮操作 */
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 根据通知类型获取服务商 */
    changeType() {

      this.queryParams.type = this.form.type;
      getProvider(this.queryParams).then(response => {
        this.providerData = response.data;
        if (this.operationType !== 0) {
          this.form.configuration = {};
          if (this.queryParams.type === 'email') {
            this.form.configuration.properties = [{}];
          }

        }

        this.$forceUpdate();
      })
    },

    /** 新增按钮操作 */
    handleAddConfig() {
      this.reset();
      this.operationType = this.operationType + 1;
      this.typeVisible = false;
      this.open = true;
      this.title = "添加通知配置";

    },

    /**
     * 新增其他配置
     */
    addPropertiesDomain() {
      this.form.configuration.properties.push({});
      this.$forceUpdate();
    },
    /**
     * 删除其他配置
     */
    removePropertiesDomain(index) {
      if (index > 0) {
        this.form.configuration.properties.splice(index, 1);
        this.$forceUpdate();
        return;
      }
      this.$forceUpdate();
      this.form.configuration.properties.pop();
    },

    /**
     * 新增其他配置显示与隐藏处理
     */
    buttonAddPropertiesVisible(index) {
      return index === (this.form.configuration.properties.length - 1);
    },
    /**
     * 移除其他配置显示与隐藏处理
     */
    buttonRemovePropertiesVisible(index) {
      if (index === 0 && this.form.configuration.properties.length > 1) {
        return true;
      }
      if (index === 0 && this.form.configuration.properties.length === 1) {
        return false;
      }
      return index !== 0;
    },

    /** 修改按钮操作 */
    handleUpdate(id) {
      //回显
      getConfig(id).then(response => {
        let data = response.data;
        data.configuration = JSON.parse(data.configuration)
        this.form = data;
        this.changeType();
        this.operationType = 0;
        this.typeVisible = true;
        this.open = true;
        this.title = "修改通知配置";
      });

    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        let form = JSON.parse(JSON.stringify(this.form))
        form.configuration = JSON.stringify(form.configuration);

        if (valid) {
          if (this.form.id != null) {
            updateConfig(form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.$store.commit("CONFIG_DATA", JSON.parse(JSON.stringify(this.form)));
            });
          } else {

            addConfig(form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.$store.commit("CONFIG_DATA", JSON.parse(JSON.stringify(this.form)));
            });
          }

        }
      });

    },


    /**
     * 根据通知类型显示隐藏表单
     * @param type 通知类型
     */
    visibleByConfig(type, provider) {
      if (!type) {

        // 隐藏 appKey
        this.appKeyVisible = false;
        // 隐藏 appSecretVisible
        this.appSecretVisible = false;
        // 隐藏 hostVisible
        this.hostVisible = false;
        // 隐藏 portVisible
        this.portVisible = false;
        //隐藏 senderVisible
        this.senderVisible = false;
        // 用户名默认隐藏
        this.usernameVisible = false;
        // 密码默认隐藏
        this.passwordVisible = false;
        // accessKeyId输入框默认隐藏
        this.accessKeyIdVisible = false;
        // secret默认隐藏
        this.secretVisible = false;
        // appKey默认隐藏
        this.appKeyVisible = false;
        // appSecret默认隐藏
        this.appSecretVisible = false;
        // corpId默认隐藏
        this.corpIdVisible = false;
        // corpSecret 默认隐藏
        this.corpSecretVisible = false;
        // regionIdVisible 默认隐藏
        this.regionIdVisible = false;
        //隐藏 其他配置
        this.propertiesVisible = false;


      } else if (type === 'dingTalk' && provider === 'dingTalkMessage') {

        // 显示 appKey
        this.appKeyVisible = true;
        // 显示 appSecret
        this.appSecretVisible = true;
        // 隐藏 hostVisible
        this.hostVisible = false;
        // 隐藏 portVisible
        this.portVisible = false;
        //隐藏 senderVisible
        this.senderVisible = false;
        // 隐藏 用户名
        this.usernameVisible = false;
        // 隐藏 密码
        this.passwordVisible = false;
        // 隐藏 accessKeyId
        this.accessKeyIdVisible = false;
        // 隐藏 secret
        this.secretVisible = false;
        // 隐藏 corpId
        this.corpIdVisible = false;
        // 隐藏 corpSecret
        this.corpSecretVisible = false;
        // regionIdVisible 默认隐藏
        this.regionIdVisible = false;
        //隐藏 其他配置
        this.propertiesVisible = false;

      } else if (type === 'email' && provider === 'embedded') {
        // 显示 hostVisible
        this.hostVisible = true;
        // 显示 portVisible
        this.portVisible = true;
        //显示 senderVisible
        this.senderVisible = true;
        // 显示 用户名
        this.usernameVisible = true;
        // 显示 密码
        this.passwordVisible = true;
        //显示 其他配置
        this.propertiesVisible = true;

        // 隐藏 appKey
        this.appKeyVisible = false;
        // 隐藏 appSecretVisible
        this.appSecretVisible = false;
        // 隐藏 accessKeyId
        this.accessKeyIdVisible = false;
        // 隐藏 secret
        this.secretVisible = false;
        // 隐藏 appKey
        this.appKeyVisible = false;
        // 隐藏 appSecret
        this.appSecretVisible = false;
        // 隐藏 corpId
        this.corpIdVisible = false;
        // 隐藏 corpSecret
        this.corpSecretVisible = false;
        // regionIdVisible 默认隐藏
        this.regionIdVisible = false;


      } else if (type === 'sms' && provider === 'aliyunSms') {
        //显示 regionId
        this.regionIdVisible = true;
        // 显示 accessKeyId
        this.accessKeyIdVisible = true;
        // 显示 secret
        this.secretVisible = true;

        // appKey默认隐藏
        this.appKeyVisible = false;
        // appSecret默认隐藏
        this.appSecretVisible = false;
        // corpId默认隐藏
        this.corpIdVisible = false;
        // corpSecret 默认隐藏
        this.corpSecretVisible = false;
        // 隐藏 appKey
        this.appKeyVisible = false;
        // 隐藏 appSecretVisible
        this.appSecretVisible = false;
        // 隐藏 hostVisible
        this.hostVisible = false;
        // 隐藏 portVisible
        this.portVisible = false;
        //隐藏 senderVisible
        this.senderVisible = false;
        // 用户名默认隐藏
        this.usernameVisible = false;
        // 密码默认隐藏
        this.passwordVisible = false;
        //隐藏 其他配置
        this.propertiesVisible = false;

      } else if (type === 'weixin' && provider === 'corpMessage') {
        // 显示 corpId
        this.corpIdVisible = true;
        // 显示 corpSecret
        this.corpSecretVisible = true;
        // 隐藏 appKey
        this.appKeyVisible = false;
        // 隐藏
        this.appSecretVisible = false;
        // 隐藏 hostVisible
        this.hostVisible = false;
        // 隐藏 portVisible
        this.portVisible = false;
        //隐藏 senderVisible
        this.senderVisible = false;
        // 用户名默认隐藏
        this.usernameVisible = false;
        // 密码默认隐藏
        this.passwordVisible = false;
        // accessKeyId输入框默认隐藏
        this.accessKeyIdVisible = false;
        // secret默认隐藏
        this.secretVisible = false;
        // appKey默认隐藏
        this.appKeyVisible = false;
        // appSecret默认隐藏
        this.appSecretVisible = false;
        // regionIdVisible 默认隐藏
        this.regionIdVisible = false;
        //隐藏 其他配置
        this.propertiesVisible = false;

      } else if (type === 'voice' && provider === 'aliyun') {

        //显示 regionId
        this.regionIdVisible = true;
        // 显示 accessKeyId
        this.accessKeyIdVisible = true;
        // 显示 secret
        this.secretVisible = true;

        // appKey默认隐藏
        this.appKeyVisible = false;
        // appSecret默认隐藏
        this.appSecretVisible = false;
        // corpId默认隐藏
        this.corpIdVisible = false;
        // corpSecret 默认隐藏
        this.corpSecretVisible = false;
        // 隐藏 appKey
        this.appKeyVisible = false;
        // 隐藏
        this.appSecretVisible = false;
        // 隐藏 hostVisible
        this.hostVisible = false;
        // 隐藏 portVisible
        this.portVisible = false;
        //隐藏 senderVisible
        this.senderVisible = false;
        // 用户名默认隐藏
        this.usernameVisible = false;
        // 密码默认隐藏
        this.passwordVisible = false;
        //隐藏 其他配置
        this.propertiesVisible = false;
      }


    },

  }
}
</script>

<style scoped lang="scss">

.buttonClass {
  width: 460px;
  height: 40px;
  padding: 0;
}

</style>
